import {
  AcademicCapIcon,
  BookOpenIcon,
  UserGroupIcon,
  ChartBarIcon,
  ArrowPathIcon,
  MagnifyingGlassIcon,
  PresentationChartLineIcon
} from '@heroicons/react/24/outline';
import clsx from 'clsx'
import { Link } from 'react-router-dom';
const actions = [
  {
    title: '查院校',
    href: '/collegeList',
    icon: AcademicCapIcon,
    iconForeground: 'text-teal-700',
    iconBackground: 'bg-teal-50',
  },
  {
    title: '查专业',
    href: '#',
    icon: BookOpenIcon,
    iconForeground: 'text-purple-700',
    iconBackground: 'bg-purple-50',
  },
  {
    title: '查职业',
    href: '#',
    icon: UserGroupIcon,
    iconForeground: 'text-sky-700',
    iconBackground: 'bg-sky-50',
  },
  {
    title: '院校排行榜',
    href: '#',
    icon: ChartBarIcon,
    iconForeground: 'text-rose-700',
    iconBackground: 'bg-rose-50',
  },
  {
    title: '同分去向',
    href: '#',
    icon: ArrowPathIcon,
    iconForeground: 'text-blue-700',
    iconBackground: 'bg-blue-50',
  },
  {
    title: '位次查询',
    href: '#',
    icon: MagnifyingGlassIcon,

    iconForeground: 'text-yellow-700',
    iconBackground: 'bg-yellow-50',
  },
  {
    title: '批次线查询',
    href: '#',
    icon: PresentationChartLineIcon,
    iconForeground: 'text-green-700',
    iconBackground: 'bg-green-50',
  },
  {
    title: '智能填报',
    href: '#',
    icon: PresentationChartLineIcon,
    iconForeground: 'text-indigo-700',
    iconBackground: 'bg-indigo-50',

  }
];

export function NavCenter({ className }) {
  const renderActionCard = (action) => (
    <Link key={action.title} to={action.href}>
      <div
        className="group relative bg-white p-6 rounded-lg transition-transform transform hover:scale-105 shadow-md hover:shadow-xl focus:outline-none hover:z-10 flex flex-col justify-center items-center flex-grow"
      >
        <span
          className={clsx(
            action.iconBackground,
            action.iconForeground,
            'inline-flex rounded-lg p-3 ring-4 ring-white mb-2'
          )}
        >
          <action.icon className="h-10 w-10" aria-hidden="true" />
        </span>
        <h3 className="text-base font-semibold leading-6 text-gray-900 whitespace-nowrap truncate">
          <p className="focus:outline-none">
            {action.title}
          </p>
        </h3>
      </div>
    </Link>
  );

  return (
    <div className={clsx("sm:flex-wrap md:flex items-center justify-center gap-4 grid grid-cols-4 w-full", className)}>
      {actions.map(renderActionCard)}
    </div>
  );
}
